<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>路由实例</title>
	</head>
	<body>
		<div id="app">
			
			<!-- 2.添加路由连接
				Vue中默认添加路由规则  
					1.router-link会默认渲染为a标签
					2.to属性默认渲染为 href标签
			 -->
			<router-link to="/user">用户</router-link>
			<router-link to="/dog">狗</router-link>
			
			
			<!-- 3.定义路由填充位
				将来通过路由匹配到的组件,将通过路由填充位进行展现
			 -->
			<router-view></router-view>
			
		</div>
		<!--引入js函数类库  -->
		<script src="../js/vue.js"></script>
		<!-- 引入路由规则 -->
		<script src="../js/vue-router.js"></script>
		<script>
			
			//4.定义user组件
			const user = {
				template: '<h1>我是User组件</h1>'
			}
			
			//定义dog组件
			const dog = {
				template: `<h1>我是Dog组件</h1>`
			}
			
			//5.创建路由规则
			//属性routes[] 定义路由规则
			//path: 定义路径
			//component: 定义组件名称
			const router = new VueRouter({
				//routes 定义路由规则
				routes: [
					/* 定义路由重定向 */
					{path:"/", redirect: "/user"},
					{path:"/user",component: user},
					{path:"/dog",component: dog}
				]
			})
			
			
			//6.将路由挂载到Vue实例中
			const app = new Vue({
				el: "#app",
				//挂载路由实例对象   如果名称一致 可以简化
				//router: router
				router
			})
			
		</script>
	</body>
</html>
